<script setup lang="ts">
import { defineComponent, ref } from 'vue'
import {CustomerModel, getCustomerListAll} from '@/api/customer/customer-list.ts'
import { getCustomerList } from '@/api/customer/customer-list.ts'

// 添加一个方法来触发自定义事件，传递地址信息给父组件
const emit = defineEmits(['customerSelected'])

const vl = defineProps({
  customerType: {
    type: Number,
    default: 1
  }
})

const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes
  },
})

const customerId = ref()

function customerSelected() {
  console.log(`customerSelected${customerId.value}`)

  emit('customerSelected', customerId.value)
}

const customerModelMap = shallowRef<CustomerModel[]>([])

const customerModel = reactive<CustomerModel>(<CustomerModel>{
  customerType: vl.customerType,
})

async function init() {
  // 初始加载所有产品
  const { data } = await getCustomerListAll(customerModel)
  console.log(data)
  customerModelMap.value = data ?? []
}

onMounted(() => {
  init()
})
</script>

<template>
  <a-select v-model:value="customerId"  show-search placeholder="请选择客户" style="width: 300px" @change="customerSelected">
    <a-select-option v-for="customerModel in customerModelMap" :value="customerModel.customerId">
      {{ customerModel.name }}
    </a-select-option>
  </a-select>
</template>

<style scoped lang="less">

</style>
